<template>
  <div class="withdraw-select-container">
    <ResponsiveNav />
    <div class="header-placeholder"></div>

    <div class="page-content">
      <div class="withdraw-select-page">
        <!-- 面包屑导航区域 -->
        <div class="page-nav">
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/assets' }">
                <i class="fas fa-chevron-left"></i> {{ $t('返回资产') }}
              </el-breadcrumb-item>
              <el-breadcrumb-item>{{ $t('充值') }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="divider"></div>
        </div>

        <!-- 页面标题 -->
        <div class="page-header">
          <h1>{{ $t('充值') }}</h1>
        </div>

        <!-- 提款方式选择 -->
        <div class="withdraw-methods">
          <!-- 银行卡提款 -->
          <div class="method-card" @click="goToWithdraw('bank')">
            <div class="method-icon">
              <i class="fas fa-university"></i>
            </div>
            <div class="method-info">
              <h3>{{ $t('银行卡') }}{{ $t('充值') }}</h3>
              <!-- <p>{{ $t('提现到绑定的银行卡') }}</p> -->
              <div class="features">
                <span class="feature-tag">{{ $t('免手续费') }}</span>
                <span class="feature-tag">{{ $t('快速到账') }}</span>
              </div>
            </div>
            <i class="fas fa-chevron-right arrow-icon"></i>
          </div>

          <!-- 加密货币提款 -->
          <div class="method-card" @click="goToWithdraw('crypto')">
            <div class="method-icon">
              <i class="fab fa-bitcoin"></i>
            </div>
            <div class="method-info">
              <h3>{{ $t('加密货币充值') }} </h3>
              <!-- <p>{{ $t('提现到加密货币钱包') }}</p> -->
              <div class="features">
                <span class="feature-tag">{{ $t('多币种支持') }}</span>
                <span class="feature-tag">{{ $t('全球通用') }}</span>
              </div>
            </div>
            <i class="fas fa-chevron-right arrow-icon"></i>
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import ResponsiveNav from '@/components/ResponsiveNav.vue'
import Footer from '@/components/Footer.vue'

const router = useRouter()

const goToWithdraw = (type: 'bank' | 'crypto') => {
  if (type === 'bank') {
    // router.push('/assets/bank-withdraw')
    router.push('/account/customer-service')
  
  } else {
    router.push('/assets/recharge')
  }
}
</script>

<style lang="scss" scoped>
.withdraw-select-container {
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.withdraw-select-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.withdraw-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.method-card {
  display: flex;
  align-items: center;
  padding: 24px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    border-color: var(--el-color-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  .method-icon {
    width: 48px;
    height: 48px;
    background: var(--el-color-primary-light-9);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;

    i {
      font-size: 24px;
      color: var(--el-color-primary);
    }
  }

  .method-info {
    flex: 1;

    h3 {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 4px;
    }

    p {
      color: #666;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .features {
      display: flex;
      gap: 8px;
    }

    .feature-tag {
      background: #f5f5f5;
      color: #666;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
    }
  }

  .arrow-icon {
    color: #999;
    font-size: 16px;
    margin-left: 16px;
  }
}

@media (max-width: 768px) {
  .withdraw-select-page {
    padding: 16px;
  }

  .method-card {
    padding: 16px;

    .method-icon {
      width: 40px;
      height: 40px;

      i {
        font-size: 20px;
      }
    }
  }
}

.page-header {
  margin: 12px 0 20px;

  h1 {
    font-size: 24px;
    color: #111;
    font-weight: 500;
  }
}
</style>
